<template>
  <div class="layout" :class="menuCollapsed ? 'collapse-menus' : ''">
    <navs @toggle-menu="menuCollapsed = !menuCollapsed" />
    <div class="main-content" :style="{ height: mainContentHeight + 'px' }">
      <div class="header-panel">
        <span class="btn-toggle"></span>
        <div class="logo">
          <router-link :to="{ path: '/', query: { lnk: 'crumb' } }">
            <small>{{ shortTitle }}</small>
          </router-link>
        </div>
        <div v-if="showUserHeader" class="navbar-header" role="navigation">
          <Dropdown>
            <template #overlay>
              <Menu>
                <Menu.Item @click="logOff"><LogoutOutlined /> 注销</Menu.Item>
                <Menu.Divider />
                <Menu.Item @click="about"><QuestionCircleOutlined /> 关于</Menu.Item>
              </Menu>
            </template>
            <div class="nav">
              <span class="user-flag">
                <UserOutlined />
              </span>
              <span class="user-info">{{ user.userName }} </span>
              <DownOutlined />
            </div>
          </Dropdown>
        </div>
      </div>
      <div class="content-panel" :style="{ 'min-height': contentHeight + 'px' }">
        <div class="breadcrumbs">
          <Breadcrumb>
            <Breadcrumb.Item v-for="nav of navDatas">
              <router-link :class="nav.path ? 'active' : ''" :to="{ path: nav.path || '#', query: { lnk: 'crumb' } }">{{ nav.title }}</router-link>
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div class="content-body">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { useStore } from 'vuex';
  import { useRoute, useRouter } from 'vue-router';
  import { ref, watch, computed, inject, onMounted } from 'vue';

  import { Breadcrumb, Dropdown, Menu } from 'ant-design-vue';
  import { UserOutlined, DownOutlined, LogoutOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';

  import navs from '@/components/layout/Navs.vue';

  const $store = useStore();
  const $route = useRoute();
  const $router = useRouter();
  const $http = inject('$http');
  const $modal = inject('$modal');
  const $eventBus = inject('$eventBus');

  const defaultLimit = { capitalandNet: false, platform: 'window', internet: false };

  const mainContentHeight = ref(window.innerHeight);
  const contentHeight = ref(window.innerHeight - 60);

  const shortTitle = ref('');
  const showUserHeader = ref(false);

  const menuCollapsed = ref(false);
  const navDatas = ref($store.getters.getCrumbs($router.currentRoute.value));

  const user = computed(() => $store.state.user);

  window.addEventListener('resize', computedWindowSize, false);

  watch(
    () => $route,
    () => {
      navDatas.value = $store.getters.getCrumbs($router.currentRoute.value);
      $eventBus.emit('router-changed', navDatas.value[navDatas.value.length - 1]);
    },
    { deep: true, flush: 'post' }
  );

  function computedWindowSize() {
    if (window.outerWidth < 620 && window.location.href.indexOf('/?m=mobile') == -1) {
      window.location.href = '/?m=mobile';

      return;
    }

    mainContentHeight.value = window.innerHeight;
    contentHeight.value = mainContentHeight.value - 60;

    let area = { height: contentHeight.value, width: window.innerWidth - 60 };

    $store.commit('contentArea', area);
    $eventBus.emit('windowResizeChanged', area);
  }

  // function retryMonitor(limit) {
  //   $http.get(`/api/shell/supported`, { hideTip: true }).then(
  //     res => {
  //       if (res.success) {
  //         if (res.data.capitalandNet) {
  //           limit.capitalandNet = true;
  //         }

  //         if (res.data.platform == 'linux') {
  //           limit.platform = 'linux';
  //         }
  //       }

  //       $store.commit('resetNav', limit);
  //     },
  //     err => {
  //       console.log(err);

  //       $store.commit('resetNav', limit);
  //     }
  //   );
  // }

  function logOff() {
    $modal.confirm({
      title: '警告',
      content: '是否确定退出？',
      onOk() {
        localStorage.clear();

        $store.commit('logOff');
        $router.push('/logIn');
      }
    });
  }

  function about() {
    $router.push('/about');
  }

  onMounted(() => {
    // $store.commit('resetNav', defaultLimit);
    computedWindowSize();

    shortTitle.value = window.settings.shortTitle;
    showUserHeader.value = !!window.settings.needLogIn;

    // $http.get('/api/shell/supported', { resolve: false, hideTip: true }).then(
    //   res => {
    //     $store.commit('resetNav', res.data);

    //     if (res.success) {
    //       if (window.settings.monitor) {
    //         retryMonitor(res.data || defaultLimit);
    //       }
    //     }
    //   },
    //   () => {
    //     retryMonitor(defaultLimit);
    //   }
    // );
  });
</script>

<style lang="less" scoped>
  .ant-breadcrumb {
    > span {
      > .ant-breadcrumb-link {
        a.active {
          color: #1e91e8;
          font-weight: bolder;
        }
      }

      &:last-child {
        a.active {
          font-weight: normal;
          color: #000 !important;
        }
      }
    }
  }
</style>
